<template>
  <div class="artistsSearch_box" v-loading="isLoading" element-loading-text="搜索中">
    <screen @onSearchActor="onSearchActorsList" @onSearchClear="onSearchClear"></screen>
    <div style="float: right;padding: 10px;" v-if="!isProjectList">
      <button class="buttonStyle" @click="onEdit">{{isEdit ? '取消' : '编辑'}}</button>
      <button class="buttonStyle" v-if="isEdit" @click="onIntoProject">邀请进入项目</button>
    </div>
    <div style="float: right;padding: 10px;" v-if="isProjectList">
      <button class="buttonStyle" @click="onClose">取消</button>
      <button class="buttonStyle" v-if="isEdit" @click="onSureList">确定</button>
    </div>
    <div class="search_content" v-if="isRefreshTag">
      <ul class="search_content_all">
        <li class="search_content_item" v-for='item, index in actorsList' @click="pushToDetail(index)">
          <img class="search_Img" :src="item.cover">
          <img class="edit-img" @click.stop="onAddSelect(item.uid)" v-if="isEdit&&!item.isClick"
               src="../../assets/click2_normal.png">
          <img class="edit-img" @click.stop="onDeleteSelect(item.uid)" v-if="isEdit&&item.isClick"
               src="../../assets/click2_selected.png">
          <div class="information">
            <span class="information_name">
              <ul class="information_details_name">
                <li class="details_item">{{item.realName}}</li>
                <li>{{item.sex == 1 ? '男' : '女'}}</li>
                <li class="item_color">{{item.score}}</li>
              </ul>
              <ul class="information_details_age">
                <li>{{item.age}}岁</li>
                <li>{{item.height}}cm</li>
                <li>{{item.weight}}kg</li>
              </ul>
              <p>职业:{{item.jobList}}</p>
              <p>城市:{{item.cityList}}</p>
            </span>
            <span class="information_icon">
              <div class="text_one_two">
              <img @click.stop @click="onCollect(item.uid)" v-show="item.isCollect == 0"
                   src="../../assets/collect_normal.png" alt/>
              <img @click.stop @click="onDeleteCollect(item.collectID)" v-show="item.isCollect == 1"
                   src="../../assets/collect_selected.png" alt/>
            </div>
              <!--<button class="confirm" @click="visit = true">邀请</button>-->
            </span>
          </div>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="rowsCount"
      ></el-pagination>
    </div>
    <el-dialog title="邀请加入项目" :visible.sync="visit" width="40%" height="80%">
      <div class="visit_box">
        <div class="visit">
          <div class="newProject">
            <span>新建项目</span>
          </div>
          <div class="content" v-for="item in myProjectList" @click="selectProject(item)">
            <span>{{item.projectName}}</span>
            <div class="content_footer">
              <span>招募人数：{{item.recruiting}}</span>
              <span>发布时间：{{item.createTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <!--<div slot="footer" class="dialog-footer">-->
      <!--<span @click="visit = false;">取消</span>-->
      <!--<div class="dialog_text">-->
      <!--<span>确认</span>-->
      <!--</div>-->
      <!--</div>-->
    </el-dialog>
  </div>
</template>

<script>
  import screen from "../../components/screen";
  export default {
    components: {
      screen
    },
    data() {
      return {
        currentPage: 1,
        visit: false,
        actorsList: [],
        rowsCount: 0,
        page: 1,
        isEdit: false,
        actorsIdSet: new Set(),
        isRefreshTag: true,
        myProjectList: [],
        mySelectActorsList: [], //已选择的艺人id数组
        projectID: '',
        projectStatus: 0,
        isProjectList: false,
        isLoading: false,
        searchForm: null,
        columnCID: '1'
      };
    },
    mounted: function () {
      let projectID = this.$route.query.projectID;
      if (typeof projectID !== "undefined" && projectID !== null && projectID !== "") {
        this.projectID = projectID;
        this.projectStatus = this.$route.query.projectStatus;
        this.isEdit = true;
        this.isProjectList = true;
        this.columnCID = this.$route.query.columnCID;
      }
      console.log("projectID=" + this.projectID + ",projectStatus=" + this.projectStatus + ",columnCID=" + this.columnCID);
      this.getActorsList();
    },
    methods: {
      /**
       * 获取艺人列表
       *
       */
      getActorsList() {
        let self = this;
        self.isLoading = true;
        self.actorsList = {};
        let obj = {};
        if (this.searchForm == null) {
          obj = {
            token: self.globalData.token,
            columnCID: self.columnCID,
            pageSize: '20',
            page: this.page
          };
        } else {
          obj = this.searchForm;
          obj.page = this.page;
        }
        self.$post("/User/getUserActor", obj).then(res => {
          if (res.code === "200") {
            self.actorsList = res.data.userList;
            self.pageCount = res.data.pageCount;
            self.rowsCount = res.data.rowsCount;
          } else {
            self.$message.error(res.message);
          }
          self.isLoading = false;
        });
      },
      /**
       * 跳转到艺人详情
       *
       */
      pushToDetail(index) {
        let routeData = this.$router.resolve({
          path: "/newArtistDetail",
          query: {uid: this.actorsList[index].uid}
        });
        window.open(routeData.href, '_blank');
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.getActorsList();
      },
      /**
       * 根据选择条件搜索艺人
       *
       */
      onSearchActorsList(msg){
        console.log(msg);
        this.page = 1;
        let self = this;
        let obj = {
          token: self.globalData.token,
          columnCID: self.columnCID,
          pageSize: '20',
          page: this.page,
          keywords: msg.keywords,
          fansData: msg.fansData,
          salaryValue: msg.salaryValue,
          typeId: msg.typeId,
          startAge: msg.startAge,
          endAge: msg.endAge,
          startHeight: msg.startHeight,
          endHeight: msg.endHeight,
          salaryType: msg.salaryType,
          startSalary: msg.startSalary,
          endSalary: msg.endSalary,
          fansType: msg.fansType,
          startFans: msg.startFans,
          endFans: msg.endFans,
          typeID: msg.typeID,
          languageID: msg.languageID,
          jobID: msg.jobID,
          sex: msg.sex
        };
        this.searchForm = obj;
        self.isLoading = true;
        self.actorsList = {};
        self.$fetch("/User/getUserActor", obj).then(res => {
          if (res.code === "200") {
            self.actorsList = res.data.userList;
            self.pageCount = res.data.pageCount;
            self.rowsCount = res.data.rowsCount;
          } else {
            self.$message.error(res.message);
          }
          self.isLoading = false;
        });
      },
      onSearchClear(msg){
        this.searchForm = msg;
      },
      /**
       * 选择艺人
       *
       */
      onAddSelect(id){
        this.actorsIdSet.add(id);
        for (let i = 0; i < this.actorsList.length; i++) {
          if (this.actorsList[i].uid === id) {
            //更新tableData中的数据
            this.actorsList[i].isClick = true;
            this.isRefreshTag = false;
            this.isRefreshTag = true;
            break;
          }
        }
        console.log(this.actorsIdSet);
      },
      /**
       * 删除艺人
       *
       * */
      onDeleteSelect(id){
        this.actorsIdSet.delete(id);
        for (let i = 0; i < this.actorsList.length; i++) {
          if (this.actorsList[i].uid === id) {
            this.actorsList[i].isClick = false;
            this.isRefreshTag = false;
            this.isRefreshTag = true;
            break;
          }
        }
        console.log(this.actorsIdSet);
      },
      onEdit(){
        this.isEdit = !this.isEdit;
        if (!this.isEdit) {
          this.actorsIdSet.clear();
        }
      },
      /**
       * 选择的艺人生成数组
       */
      onSelectActorsList(){
        this.mySelectActorsList = [];
        for (let x of this.actorsIdSet) { // 遍历选中的演员set
          this.mySelectActorsList.push(x);
        }
      },
      onIntoProject(){
        this.onSelectActorsList();
        console.log(this.mySelectActorsList);
        if (this.mySelectActorsList.length <= 0) {
          this.$message({
            type: 'error',
            message: '请选择艺人!'
          });
          return;
        }
        this.visit = true;
        let self = this;
        let obj = {token: self.globalData.token, page: 1, pageSize: 100000};
        self.$fetch("/Category/getProject", obj).then(res => {
          if (res.code === "200") {
            console.log(res);
            self.myProjectList = res.data.projectList;
          } else {

          }
        });
      },
      selectProject(item) {
        this.$confirm('是否邀请艺人至该项目', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let actorid = this.mySelectActorsList.join(',');
          let obj = {token: this.globalData.token, actorUid: actorid, projectID: item.projectID, projectStatus: 4};
          self.$post("/User/createUserProjectSiginUp", obj).then(res => {
            if (res.code === "200") {
              console.log(res);
              self.myProjectList = res.data.projectList;
              this.$message({
                type: 'success',
                message: '邀请成功!'
              });
            } else {

            }
            this.visit = false;
          });
        }).catch(() => {

        });
      },
      onSureList(){
        this.onSelectActorsList();
        console.log(this.mySelectActorsList);
        if (this.mySelectActorsList.length <= 0) {
          this.$message({
            type: 'error',
            message: '请选择艺人!'
          });
          return;
        }
        let actorid = this.mySelectActorsList.join(',');
        let obj = {
          token: this.globalData.token,
          actorUid: actorid,
          projectID: this.projectID,
          projectStatus: this.projectStatus
        };
        this.$post("/User/createUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            console.log(res);
            this.$message({
              type: 'success',
              message: '邀请成功!'
            });
            this.onClose();
          } else {

          }
          this.visit = false;
        });
      },
      onClose()
      {
        this.$router.go(-1);
      },
      onCollect(id){
        let self = this;
        let obj = {
          token: self.globalData.token,
          actorUid: id
        };
        self.$fetch("/User/createCollect", obj).then(res => {
          if (res.code === "200") {
            self.$message("收藏成功");
            self.getActorsList();
          } else {
            self.$message.error(res.message);
          }
        });
      },
      onDeleteCollect(collectID){
        let self = this;
        let obj = {
          token: self.globalData.token,
          collectID: collectID
        };
        self.$fetch("/User/deleteCollect", obj).then(res => {
          if (res.code === "200") {
            self.$message("取消收藏成功");
            self.getActorsList();
          } else {
            self.$message.error(res.message);
          }
        });
      },

      refreshList(uid){
        for (let v of this.actorsList) {
          if (v.uid === uid) {
            if (v.isCollect === 0) {
              v.isCollect = 1
            } else {
              v.isCollect = 0;
            }
          }
        }
      }
    },
  };
</script>

<style lang="less">
  .artistsSearch_box {
    width: 80%;
    margin: auto;
  }

  .search_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    .search_content_all {
      width: calc(100% + 10px);
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      .search_content_item {
        display: flex;
        flex-direction: column;
        flex: 0 0 calc(25% - 30px);
        margin-right: 28px;
        margin-top: 10px;
        border-radius: 5px;
        -moz-box-shadow: 0 3px 13px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 3px 13px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 13px 0px rgba(0, 0, 0, 0.1);
        height: auto;
        border: 1px solid #eee;
        .search_Img {
          width: 100%;
          border-radius: 5px 5px 0 0;
        }
        .edit-img {
          position: absolute;
          width: 20px;
          height: auto;
        }
        .information {
          display: flex;
          flex-direction: row;
          .information_name {
            width: 100%;
            height: 100%;
            display: block;
            color: #999;
            margin-left: 4px;
            padding-right: 4px;
            .information_details_name,
            .information_details_age,
            .information_details_address {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              padding-left: 0px;
              li {
                line-height: 20px;
              }
            }
            .information_details_name {
              margin-top: 10px;
              .details_item {
                font-size: 20px;
                color: #000;
                padding-right: 10px;
                max-lines: 1;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 80px;
              }
              .item_color {
                color: orange;
                padding: 0 10px 0 10px;
              }
            }
            .information_details_age {
              li {
                margin-right: 10px;
              }
            }
          }
          .information_icon {
            display: flex;
            flex-direction: column;
            width: 27%;
            justify-content: space-between;
            img {
              width: 20px;
              align-self: flex-end;
              margin: 10px 10px 10px 0;
            }
            .confirm {
              width: 60px;
              height: 28px;
              background: rgb(192, 6, 6);
              border: 1px solid rgb(192, 6, 6);
              border-radius: 5px;
              color: #fff;
              align-self: flex-end;
              margin: 0 10px 10px 0;
              outline: none;
            }
          }
        }
      }
    }
  }

  .newProject {
    width: 80%;
    height: 34px;
    margin: auto;
    border: 1px solid red;
    text-align: center;
    line-height: 34px;
    color: red;
    border-radius: 2px;
  }

  .content {
    margin-top: 10px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    border-bottom: 1px solid #f0f0f0;
    .content_footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .buttonStyle {
    padding: 0px 20px;
    background-color: #bd2f2e;
    color: white;
    height: 30px;
    border-radius: 4px;
  }

  p {
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
